/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \personnelmanage\src\pages\CustomerManage\PrizeCashing\component\PrizeDetails.tsx
 * @Date: 2021-12-24 11:49:24
 * @LastEditTime: 2022-10-11 17:49:15
 */

import React from 'react'
import { UdTable, UdForm, http, UdFilter } from '@/lib'
import { Select, Spin, InputNumber, Input } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import UdSelect from '@/components/UdFormControls/UdSelect'
import apis from '@/apis/CustomerManage';
import udMainStore from '@/store/UdMain'

const { Option } = Select

export default class PrizeAdd extends React.Component<IProps, IState> {
    protected filterForm: WrappedFormUtils = {} as WrappedFormUtils
    protected form: WrappedFormUtils = {} as WrappedFormUtils
    public brandList = udMainStore.brandList
    private conditions: any = [
        {
            label: '品牌公司',
            id: 'brandCode',
            render: <UdSelect showSearch allowClear={false} options={this.brandList} disabled={true} />,
        },
    ]
    private columns: any = [
        ['序号', 'id', (text, record, index) => index + 1, { width: '50px' }],
        { title: '品牌公司名称', dataIndex: 'brandName', key: 'brandName', minWidth: '120px' },
        { title: '奖品名称', dataIndex: 'prizeName', key: 'prizeName', minWidth: '120px' },
        { title: '核销政策名称', dataIndex: 'verifyPolicyName', key: 'verifyPolicyName', minWidth: '120px' },
        {
            title: '是否有效', dataIndex: 'invalidStatus', key: 'invalidStatus', minWidth: '120px',
            render: (text, record, index) => {
                if (text + '' === '0') {
                    return '生效'
                } else {
                    return '失效'
                }
            },
        },
        { title: '奖品规则', dataIndex: 'prizeRule', key: 'prizeRule', minWidth: '120px' },
        {
            title: '兑付数量', dataIndex: 'prizeNumber', key: 'prizeNumber', minWidth: '160px',
            render: (text, record, index) =>
                <InputNumber value={text} disabled={true} />
        },
    ]
    private TypeList: any[] = [{
        acctType: '0',
        name: '分销商'
    }, {
        acctType: '1',
        name: '终端'
    }]

    constructor(props: Readonly<IProps>) {
        super(props)
        this.state = {
            brandCode: '',
            accountType: 1,//1经销商   2分销商
            id: '',
            distributorList: [],//下级客户列表
            acctCode: '',//下级分销商/终端code
            acctName: '',//下级分销商/终端名称
            loading: false,
            loadingList: false,
            PrizeList: [],//奖品信息

            uploading: false,
            record: {},
            selectedRowKeys: [],
            selectedRows: [],

            pagination: {},
            page: 1,
            size: 20,
            total: 0,
        }
    }

    render() {
        let { record } = this.state

        let items = []
        if (record.agentType === '2') {
            items = [
                {
                    label: '下级客户类型',
                    id: 'acctType',
                    render: () => (
                        <Select disabled={true} placeholder="请选择下级客户类型" >
                            {
                                this.TypeList.length > 0 &&
                                this.TypeList.map(({ acctType, name }) => {
                                    return <Option key={acctType} value={acctType}>{name}</Option>
                                })
                            }
                        </Select>
                    ),
                },
                { label: '下级客户名称', id: 'acctName', render: () => (<Input disabled={true} />) },
                { label: '下级客户编码', id: 'acctCode', render: () => (<Input disabled={true} />) },
                { label: '分销商名称', id: 'dealerName', render: () => (<Input disabled={true} />) },
                { label: '分销商编码', id: 'dealerCode', render: () => (<Input disabled={true} />) },
                { label: '品牌公司名称', id: 'brandName', render: () => (<Input disabled={true} />) },
                { label: '品牌公司编码', id: 'brandCode', render: () => (<Input disabled={true} />) },
                { label: '片区名称', id: 'belongAreaName', render: () => (<Input disabled={true} />) },
                { label: '片区编码', id: 'belongAreaCode', render: () => (<Input disabled={true} />) },
            ]
        } else {
            items = [
                {
                    label: '下级客户类型',
                    id: 'acctType',
                    render: () => (
                        <Select disabled={true} placeholder="请选择下级客户类型" >
                            {
                                this.TypeList.length > 0 &&
                                this.TypeList.map(({ acctType, name }) => {
                                    return <Option key={acctType} value={acctType}>{name}</Option>
                                })
                            }
                        </Select>
                    ),
                },
                { label: '下级客户名称', id: 'acctName', render: () => (<Input disabled={true} />) },
                { label: '下级客户编码', id: 'acctCode', render: () => (<Input disabled={true} />) },
                { label: '经销商名称', id: 'dealerName', render: () => (<Input disabled={true} />) },
                { label: '经销商编码', id: 'dealerCode', render: () => (<Input disabled={true} />) },
                { label: '品牌公司名称', id: 'brandName', render: () => (<Input disabled={true} />) },
                { label: '品牌公司编码', id: 'brandCode', render: () => (<Input disabled={true} />) },
                { label: '片区名称', id: 'belongAreaName', render: () => (<Input disabled={true} />) },
                { label: '片区编码', id: 'belongAreaCode', render: () => (<Input disabled={true} />) },
            ]
        }

        return (
            <Spin
                spinning={this.state.uploading}
            >
                <UdFilter
                    getForm={form => {
                        this.form = form
                    }}
                    items={this.conditions}
                    onSearch={values => {
                        this.handleSearch(values)
                    }}
                    loading={this.state.loadingList}
                    resetAfter={this.resetFilterHandle}
                />
                <UdTable
                    rowKey="id"
                    columns={this.columns}
                    dataSource={record.prizeInfo}
                    loading={this.state.loadingList}
                    pagination={{
                        current: this.state.page,
                        pageSize: this.state.size,
                        total: this.state.total,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: ['20', '30', '40'],
                        showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
                        onChange: (page, pageSize) => { this.handleChangePage(page, pageSize) },
                        onShowSizeChange: (current, size) => { this.handleChangePage(current, size) }
                    }}
                    // rowSelection={{
                    //     selectedRowKeys: this.state.selectedRowKeys,
                    //     getCheckboxProps: record => ({
                    //         disabled: true
                    //     })
                    // }}
                    onChange={paginationOpt => {
                        this.setState({ pagination: paginationOpt })
                    }}
                ></UdTable>
                <div>&nbsp;</div>
                <UdForm
                    getForm={form => (this.filterForm = form)}
                    items={items}
                    values={record}
                />
            </Spin>
        )
    }

    public componentDidMount() {
        this.getPrizeRecordById()
    }

    private handleSearch = (values: Record<string, any>) => {
        let { brandCode } = values
        this.setState({ brandCode, page: 1 }, () => {
            this.getPrizeRecordById()
        })
    }
    private resetFilterHandle = (form: WrappedFormUtils) => {
        this.setState({ PrizeList: [], page: 1, total: 0 }, () => {
            this.getPrizeRecordById()
        })
    }
    //分页
    private handleChangePage = (page, size) => {
        this.setState({ page, size }, () => {
        })
    }
    public getPrizeRecordById = () => {
        this.setState({
            uploading: true
        })
        http.get(apis.getPrizeWipedRecordById, { params: { id: this.props.id } }).then(res => {
            let record = res.data || {}
            this.filterForm.setFieldsValue({ acctType: record.acctType })
            this.form.setFieldsValue({ brandCode: record?.brandCode })
            this.setState({
                record,
                uploading: false
            })
        }).catch(err => {
            this.setState({
                uploading: false
            })
        })
    }


}

interface IProps {
    id: string
}
interface IState {
    brandCode: any,
    id: string,
    accountType: number,
    distributorList: any[],
    acctCode: string,
    acctName: string,
    loading: boolean,
    loadingList: boolean,
    PrizeList: any[],
    page?: any
    size?: any
    total?: any
    uploading?: boolean
    record: any,
    selectedRowKeys: number[],
    pagination: Record<string, any>,
    selectedRows: Record<string, any>[],
}
